<div class="card-title" style="padding-top: 1em">
  <cmdb-content-header title="Exportd Job#{{taskID}} Logs"></cmdb-content-header>
</div>

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-exist" role="tab"
       aria-controls="nav-home" aria-selected="true">
      Existing Job Logs <span class="badge badge-secondary">{{existingLength}}</span>
    </a>
  </div>
</nav>
<div class="tab-content pt-4" id="nav-tabContent">
  <div *ngIf="cleanupInProgress" id="cleanup-progress" class="m-2">
    <ngb-progressbar type="danger" [value]="cleanupProgress" [animated]="true" [striped]="true"></ngb-progressbar>
  </div>
  <div class="tab-pane fade show active" id="nav-exist" role="tabpanel" aria-labelledby="nav-home-tab">

    <div class="card-body" style="padding: 0 0 1em 0;">
      <button type="button" class="btn btn-danger btn-sm" (click)="delSelected()">Delete Selected</button>
    </div>

    <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"
           id="job-logs-datatable" class="table table-striped table-bordered">
      <thead>
      <tr>
        <th><input type="checkbox" class="selectAll" name="selectAll" value="all" (click)="selectAll()"></th>
        <th>ID</th>
        <th>Job ID</th>
        <th>Job state</th>
        <th>Event</th>
        <th>Action</th>
        <th>User</th>
        <th>Date</th>
        <th>Message</th>
        <th *permissionLink="['base.exportd.log.delete']">Action</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let log of jobLogs">
        <td></td>
        <td>{{log.public_id}}</td>
        <td>{{log.job_id}}</td>
        <td><cmdb-active-badge [activeStatus]="log.state"></cmdb-active-badge></td>
        <td>{{log.event}}</td>
        <td>{{log.action_name}}</td>
        <td>{{log.user_name}}</td>
        <td>{{log.log_time?.$date | date:"dd/MM/yyyy - HH:mm:ss"}}</td>
        <td>{{log.message}}</td>
        <td *permissionLink="['base.exportd.log.delete']">
          <a class="ml-1">
            <fa-icon [icon]="['far', 'trash-alt']" (click)="delLog(log?.public_id)"></fa-icon>
          </a>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
